<template>
  <ul class="card-list">
    <li v-for="item in props.data" :key="item.value" :class="{active: item.value === props.modelValue}"
      :style="{height}" @click="emit('update:modelValue', item.value)">
      <div class="title-content">
        <Icon v-if="item.iconConfig" :type="item.iconConfig.name || 'md-book'" size="20" :color="item.iconConfig.color || '#4a8ae9'" />
        <span class="title">{{item.label}}</span>

        <div class="select-icon"></div>
      </div>

      <p class="desc-content" :class="{'no-padding-left': !item.iconConfig}">{{item.description}}</p>
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: 1
  },
  data: {
    type: Array,
    default: () => []
  },
  height: {
    type: String,
    default: '120px'
  }
})

const emit = defineEmits(['update:modelValue'])
</script>

<style scoped lang="scss">
.card-list {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 240px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    border: 1px solid #dfe2e9;
    border-radius: 8px;
    box-shadow: 2px 3px 19px 1px #dfe2e9;
    user-select: none;
    padding: 8px 12px;
    transition: all .5s;
    &:nth-child(n + 2) {
      margin-left: 20px;
    }
    &:hover {
      border-color: #4a8ae9;
    }
    &.active {
      border-color: #4a8ae9;
      background-color: #eeedfc;
      .title-content .select-icon{
        border-width: 6px;
        border-color: #5c59d1;
      }
    }
    .title-content {
      display: flex;
      align-items: center;
      .title {
        margin-left: 8px;
      }
      .select-icon {
        margin-left: auto;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 1px solid #dcdee2;
      }
    }
    .desc-content {
      padding-left: 28px;
      margin-top: 8px;
      line-height: 1.8;
      color: #666;
      font-size: 12px;
      &.no-padding-left{
        padding-left: 8px;
      }
    }
  }
}
</style>